<template>
	<view>
		<!-- 班级列表 -->
		<view v-if="!showSessions" class="item-container">
			<view v-for="course in courses" :key="course.id" class="item" @click="showCourseSessions(course.id)">
				{{ course.name }}
			</view>
		</view>
		<!-- 期数列表 -->
		<view v-else class="item-container">
			<view class="back-button" @click="goBack">返回班级</view>
			<view v-for="session in courseSessions" :key="session.sessionNumber" class="item"
				@click="printCourseInfo(session)">
				{{ session.sessionName }}
				<view>开始时间: {{ session.startWith == null ? '暂无' : session.startWith  }}</view>
				<view>结束时间: {{ session.endWith == null ? '暂无' : session.endWith }}</view>
			</view>
		</view>
		<!-- 开班时间表单 -->
		<view v-if="showDateForm" class="date-form-mask">
			<view class="date-form">
				<view class="form-title">设置 {{currentSessionName}} 开班时间</view>
				<view class="form-item">
					<view class="form-label">开始日期:</view>
					<picker mode="date" :value="startDate" start="2020-01-01" end="2030-12-31"
						@change="onStartDateChange">
						<view class="picker">{{startDate}}</view>
					</picker>
				</view>
				<view class="form-item">
					<view class="form-label">结束日期:</view>
					<picker mode="date" :value="endDate" :start="startDate" end="2030-12-31" @change="onEndDateChange">
						<view class="picker">{{endDate}}</view>
					</picker>
				</view>
				<view class="form-buttons">
					<button class="cancel-btn" @click="closeDateForm">取消</button>
					<button class="confirm-btn" @click="confirmDateRange">确认</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSessions: false,
				showDateForm: false,
				currentCourseId: null,
				currentCourseName: '',
				currentSessionNumber: null,
				currentSessionName: '',
				startDate: '',
				endDate: '',
				id: '',
				courses: [{
						id: 1,
						name: '格物班'
					},
					{
						id: 2,
						name: '致知班'
					},
					{
						id: 3,
						name: '正心班'
					},
					{
						id: 4,
						name: '诚意班'
					}
				],
				courseSessions: []
			};
		},
		methods: {
			showCourseSessions(courseId) {
				this.showSessions = true;
				this.currentCourseId = courseId;
				this.currentCourseName = this.courses.find(course => course.id === courseId).name;
				uni.request({
					url: 'http://localhost:9090/course/getCourseSession',
					method: 'POST',
					data: {
						courseName: this.currentCourseName
					},
					success: (res) => {
						this.courseSessions = res.data.data;
					},
					fail: (err) => {
						console.error('获取课程列表失败:', err);
					}
				});
			},
			goBack() {
				this.showSessions = false;
				this.currentCourseId = null;
				this.currentCourseName = '';
				this.courseSessions = [];
			},
			printCourseInfo(session) {
				this.currentSessionNumber = session.sessionNumber;
				this.currentSessionName = session.sessionName;
				uni.showActionSheet({
					itemList: ['视频', '作业', '开班时间'],
					success: (res) => {
						if (res.tapIndex === 0) {
							uni.navigateTo({
								url: `/pages/video/index?classId=${this.currentCourseId}&sessionNumber=${session.sessionNumber}&title=` +
									this.currentCourseName + '第' + session.sessionNumber + '期'
							});
						} else if (res.tapIndex === 1) {
							uni.navigateTo({
								url: `/pages/files/index?classId=${this.currentCourseId}&sessionNumber=${session.sessionNumber}&title=` +
									this.currentCourseName + '第' + session.sessionNumber + '期'
							});
						} else if (res.tapIndex === 2) {
							this.id = session.id;
							this.showDateForm = true;
							// 设置默认日期为今天和7天后
							const today = new Date();
							const nextWeek = new Date();
							nextWeek.setDate(today.getDate() + 7);

							this.startDate = this.formatDate(today);
							this.endDate = this.formatDate(nextWeek);
						}
					},
					fail: (err) => {
						console.error('选择框显示失败:', err);
					}
				});
			},
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			onStartDateChange(e) {
				this.startDate = e.detail.value;
				if (this.startDate > this.endDate) {
					const start = new Date(this.startDate);
					start.setDate(start.getDate() + 7);
					this.endDate = this.formatDate(start);
				}
			},
			onEndDateChange(e) {
				this.endDate = e.detail.value;
			},
			closeDateForm() {
				this.showDateForm = false;
			},
			confirmDateRange() {
				uni.request({
					url: 'http://localhost:9090/user/setTimes',
					method: 'POST',
					data: {
						id: this.id,
						startWith: this.startDate,
						endWith: this.endDate
					},
					success: (res) => {
						this.showCourseSessions(this.currentCourseId) 
					},
					fail: (err) => {
						console.error('获取课程列表失败:', err);
					}
				});

				// 这里可以添加实际的保存逻辑
				uni.showToast({
					title: `设置成功`,
					icon: 'none',
					duration: 3000
				});

				this.showDateForm = false;
			}
		}
	};
</script>

<style>
	.item-container {
		padding: 10px;
	}

	.item {
		padding: 20px;
		border-bottom: 1px solid #eee;
		cursor: pointer;
	}

	.back-button {
		padding: 10px;
		background-color: #f0f0f0;
		text-align: center;
		cursor: pointer;
		margin-bottom: 10px;
	}

	.date-form-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.date-form {
		background-color: #fff;
		width: 80%;
		border-radius: 10px;
		padding: 20px;
	}

	.form-title {
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20px;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.form-label {
		width: 30%;
		font-size: 16px;
	}

	.picker {
		padding: 10px;
		border: 1px solid #eee;
		border-radius: 5px;
		width: 150%;
	}

	.form-buttons {
		display: flex;
		justify-content: space-around;
		margin-top: 30px;
	}

	.cancel-btn,
	.confirm-btn {
		width: 40%;
		padding: 10px;
		border-radius: 5px;
		text-align: center;
	}

	.cancel-btn {
		background-color: #f0f0f0;
		color: #333;
	}

	.confirm-btn {
		background-color: #007aff;
		color: #fff;
	}
</style>